<template>
	<view class="body">
		<xk-header title="巡检详情"></xk-header>
			<view v-if="5 > 0" class="list-info">
				<view v-for="(item,index) of dets" :key="index" class="data-list">
					<view class="data-item">
						<view class="order-info">
							<view style="display: flex;justify-content: space-between;">
								<view style="flex: 1;" class="info-item"><view class="key">巡检内容：</view>{{item.inspece_content}}</view>
								<view v-if="item.is_normal == '1'" class="result-state ok">正常</view>
								<view v-else class="result-state warn">异常</view>
							</view>
							<view class="info-item"><view class="key">标准值：</view>{{item.standard_num}}</view>
							<view class="info-item"><view class="key">最小值：</view>{{item.min_num}}</view>
							<view class="info-item"><view class="key">最大值：</view>{{item.max_num}}</view>
							<view class="info-item"><view class="key">检测结果：</view>{{item.inspece_num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-view" v-else>
				<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
				<view>哎呀，该界面暂无内容~</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				dets: []
			}
		},
		onLoad(options){
			this.dets = JSON.parse(options.dets)
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
.list-info {
	margin: 0 30rpx;
	padding-bottom: 30rpx;
	.list-swiper{
		height: 1000rpx;
	}
	.data-list{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		.data-item{
			.order-info{
				.info-item{
					display: flex;
					font-size: 28rpx;
					color: #333333;
					line-height: 50rpx;
					.key{
						min-width: 150rpx;
						font-size: 28rpx;
						color: #999999;
					}
					.info-imgs{
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 10rpx;
						.img-item{
							width: 120rpx;
							height: 120rpx;
							margin: 2rpx 2rpx 0 0;
						}
					}
				}
				.error{
					color: #FF3737;
				}
			}

			.target-info{
				flex: 1;
				display: flex;
				.img{
					width: 260rpx;
					height: 195rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.top{
					.name{
						font-size: 28rpx;
						font-weight: bolder;
						color: #333333;
					}
					.desc{
						font-size: 28rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
				.fee{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					.amount{
						font-size: 36rpx;
						color: #FF3737;
					}
				}
			}
		}
	}
}

.result-state{
	font-size: 24rpx;
	font-weight: bolder;
	padding: 12rpx;
	border-radius: 4rpx;
	margin-left: 20rpx;
	height: 32rpx;
}
.warn{
	color: #FF3737;
	background-color: rgba($color: #FF3737, $alpha: 0.2);
}
.ok{
	color: #2ecc71;
	background-color: rgba($color: #2ecc71, $alpha: 0.2);
}
</style>
